<template>
  <div style="overflow-x: hidden;">
    <a-row align="middle" style="margin-top: 13px;">
      <a-col :xs="24" :sm="15">
        <a-row type="flex" justify="end" style="width: 100%">
          <a-col :span="24">
            <basic-card style="width: 100%"
                        v-if="imgData!=null&&imgData.mainSlideshows!=null&&imgData.mainSlideshows.length>0"
                        title="左右拖动以滑动图片">
              <!--              navigation-->
              <!--              :pagination="{ clickable: true }"-->
<!--              effect="coverflow"-->

<!--              :coverflowEffect='{-->
<!--              "rotate": 50,-->
<!--              "stretch": 0,-->
<!--              "depth": 200,-->
<!--              "modifier": 1,-->
<!--              "slideShadows": true-->
<!--              }'-->
              <swiper
                  :loop="true"
                  style="width: 100%"
                  :slidesPerView="'auto'" :navigation="true"
                  :grabCursor="true" :centeredSlides="true"
                  :autoplay='{
                      "delay": 2500,
                      "disableOnInteraction": true
                  }'
              >
                <swiper-slide v-for="img in imgData.mainSlideshows">
                  <video controls alt="example" style="width: 100%;border-radius: 0.8em;z-index:9;" :src="img.url"
                         v-if="/^http?.+\.(swf|avi|flv|mpg|rm|mov|wav|asf|3gp|mkv|rmvb|mp4)$/i.test(img.url)"
                  />
                  <img align="center" style="width: 100%;border-radius: 0.8em;" @click="toUrl(img.redirectUrl)" v-else
                       :src="img.url">
                </swiper-slide>
              </swiper>
            </basic-card>
          </a-col>
        </a-row>
      </a-col>
      <a-col :xs="24" :sm="9" style="height: 100%;top: 0;bottom: 0">
        <a-row justify="space-between" v-if="imgData!=null&&imgData.sideImages!=null&&imgData.sideImages.length>0">
          <a-col :xs="12" :sm="24" v-for="img in imgData.sideImages">
            <basic-card style="box-sizing: border-box;width: 100%" @click="toUrl(img.redirectUrl)">
              <div style="display: flex;flex-direction: column;vertical-align: center">
                <img align="center" style="width: 100%;border-radius: 0.8em;object-fit: contain;max-height: 100%;"
                     :src="img.url">
                <div class="homePage-font">
                  {{ img.description }}
                </div>
              </div>
            </basic-card>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </div>
  <div>
    <a-row style="margin-top: 10px;">
      <a-col :xs="0" :sm="24">
        <a-row v-if="imgData!=null&&imgData.secondaryImages!=null&&imgData.secondaryImages.length>0">
          <a-col :span="8" v-for="img in imgData.secondaryImages">
            <basic-card style="width: 100%" @click="toUrl(img.redirectUrl)">
              <div style="display: flex;flex-direction: column;vertical-align: center">
                <img align="center" style="width: 100%;border-radius: 0.8em;display: flex"
                     :src="img.url">
                <div class="homePage-font">
                  {{ img.description }}
                </div>
              </div>

            </basic-card>
          </a-col>
        </a-row>
      </a-col>
      <a-col :xs="24" :sm="0">
        <basic-card v-if="imgData!=null&&imgData.secondaryImages!=null&&imgData.secondaryImages.length>0">
          <!--          navigation-->
          <!--          :pagination="{ clickable: true }"-->
          <swiper
              effect="coverflow" :loop="true"
              style="width: 100%"
              :slidesPerView="'auto'"
              :grabCursor="true" :centeredSlides="true"
              :coverflowEffect='{
                     rotate: 50,
                     stretch: 0,
                     depth: 200,
                     modifier: 1,
                     slideShadows: true
                  }'
              :autoplay='{
                      "delay": 2500,
                      "disableOnInteraction": false
                  }'
          >
            <swiper-slide v-for="img in imgData.secondaryImages">
              <div style="display: flex;flex-direction: column;vertical-align: center" @click="toUrl(img.redirectUrl)">

                <img align="center" style="width: 100%;border-radius: 0.8em;display: flex;cursor:pointer;"
                     :src="img.url">
                <!--                <div style="display: flex;margin: 4px">-->
                <!--                  什么什么神奇的商品-->
                <!--                </div>-->
              </div>

            </swiper-slide>
          </swiper>
        </basic-card>
      </a-col>
    </a-row>
  </div>
  <div v-if="typeList==null" style="height: 100vh">
  </div>
  <div v-if="typeList!=null&&typeList.length!=0">
    <h1 style="text-align: center">Shop by Department</h1>
    <div>
      <a-row type="flex" justify="center">
        <a-col :xs="24" :sm="24" :md="24" :lg="0">
          <a-row type="flex" justify="start">
            <a-col :xs="12" :sm="8" v-for="type in typeList"
                   style="display: flex;flex-direction: row;align-items: center;justify-content: center;min-height: 50px;">
              <basic-card style="width: 100%;height: 100%;cursor:pointer;" padding="false"
                          @click="toRoute('/goodList/'+type.id)">
                <div class="homePage-shop-by-department-list" style="height: 100%;cursor: pointer;">
                  <div class="homePage-shop-by-department-photo-outer" v-if="type.photo!=null">
                    <img align="center" class="homePage-shop-by-department-photo"
                         :src="type.photo">
                  </div>
                  <div class="homePage-shop-by-department-text-outer">
                    <div class="homePage-shop-by-department-text ">
                      {{ type.type }}
                    </div>
                  </div>
                </div>
              </basic-card>
            </a-col>
          </a-row>
        </a-col>
        <a-col :xs="0" :sm="0" :md="0" :lg="24">
          <swiper
               :loop="false"
               style="width: 100%"
              :slidesPerView="'auto'" :navigation="true"
               :centeredSlides="false"
               :initialSlide="parseInt(((typeList.length)/2))"

          >
            <swiper-slide v-for="type in typeList" style="width: auto;">
              <basic-card style="cursor:pointer;margin:10px 10px;" :padding="false" @click="toRoute('/goodList/'+type.id)" >
                <div class="homePage-shop-by-department-list" style="cursor:pointer;">
                  <div class="homePage-shop-by-department-photo-outer">
                    <img align="center" class="homePage-shop-by-department-photo"
                         style="cursor:pointer;"
                         :src="type.photo">
                  </div>
                  <div class="homePage-shop-by-department-text-outer">
                    <div class="homePage-shop-by-department-text homePage-font">
                      {{ type.type }}
                    </div>
                  </div>
                </div>
              </basic-card>
            </swiper-slide>
          </swiper>
<!--          <a-row type="flex" justify="start" align="top">-->
<!--            <a-col :sm="4" v-for="type in typeList" style="padding: 5px;">-->
<!--              <basic-card style="width: 100%;cursor:pointer;" padding="false" @click="toRoute('/goodList/'+type.id)">-->
<!--                <div class="homePage-shop-by-department-list" style="cursor:pointer;">-->
<!--                  <div class="homePage-shop-by-department-photo-outer">-->
<!--                    <img align="center" width="128" height="128" class="homePage-shop-by-department-photo"-->
<!--                         style="cursor:pointer;"-->
<!--                         :src="type.photo">-->
<!--                  </div>-->
<!--                  <div class="homePage-shop-by-department-text-outer">-->
<!--                    <div class="homePage-shop-by-department-text homePage-font">-->
<!--                      {{ type.type }}-->
<!--                    </div>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </basic-card>-->
<!--            </a-col>-->
<!--          </a-row>-->
        </a-col>
      </a-row>

    </div>
  </div>
  <!--  <img  align="center" style="width: 100%;object-fit: contain;" src="src/assets/img/icon/icon.png">-->
  <div v-if="randomGoodList.list1==null" style="height: 100vh">

  </div>
  <div class="good-page-shop-this-collection-outer" v-if="randomGoodList.list1!=null&&randomGoodList.list1.length>0">
    <h1 style="text-align: center">
      Most Popular Goods
    </h1>
    <a-row>
      <a-col v-for="good in randomGoodList.list1" :xs="12" :md="8" :lg="6" :xl="4"
             style="padding: 5px 5px;box-sizing: border-box;">
        <good-card @click="toRoute('/good/'+good.id)" class="good-page-other-good-card" :show-word="false" :padding="false"
                   style="cursor: pointer;"
                   :goodInfo="good"></good-card>
      </a-col>
    </a-row>
  </div>
  <div v-if="imgData==null||imgData.selfDefineModules==null" style="height: 100vh">

  </div>
  <div v-if="imgData!=null&&imgData.selfDefineModules!=null">
    <div class="good-page-shop-this-collection-outer" v-for="module in imgData.selfDefineModules">
      <div
          v-if="!((module.labelState==0&&module.itemStyle.colGrid.phone==0&&module.itemStyle.colGrid.computer==0)||(module.labelState==2&&module.swiperStyle.swiperType=='item'&&module.swiperStyle.colGrid.phone==0&&module.swiperStyle.colGrid.computer==0))">
        <h1 style="text-align: center">
          {{ module.title }}
        </h1>
        <div class="self-page-info-details" style="box-sizing: border-box;background-color: #eeeeee;text-align: center;"
             v-if="module.showDescription&&module.description!=null&&module.description.trim().length>0">
          {{ module.description.trim() }}
        </div>
        <div style="box-sizing: border-box;padding: 10px 0;">
          <div v-if="module.labelState==1">
            <basic-card @click="toUrl(module.blockStyle.url)" style="width: 100%;">
              <img :src="module.blockStyle.imgUrl" style="width: 100%;object-fit: contain;border-radius: 10px;">
              <div v-if="module.blockStyle.showBlockDescription" style="font-size: 20px;line-height: 1.5;"
                   :style="';text-align:'+module.blockStyle.descriptionPosition">
                {{ module.blockStyle.blockDescription }}
              </div>
            </basic-card>
          </div>
          <div v-if="module.labelState==0&&module.itemStyle.colGrid.computer>0" class="show-min-768px"
               :style="';justify-content:'+module.itemStyle.colGrid.align"
               style="display: flex;flex-direction: row;flex-wrap: wrap;align-content: center;align-items: flex-start;">
            <basic-card style="padding: 0 10px;cursor:pointer;box-sizing: border-box;"
                        :style="';flex:0 1 '+(100/module.itemStyle.colGrid.computer)+'%'"
                        v-for="item in module.itemStyle.itemList"  @click="toUrl(item.url)">
              <img
                  style="width: 100%;background-size: contain;background-repeat: no-repeat;background-position: center;border-radius: 10px;object-fit: contain"
                  :src="item.imgUrl">
              <div v-if="module.itemStyle.showItemDescription&&item.description!=null&&item.description.trim().length!=0" class="self-module-font"
                   :style="';text-align:'+module.itemStyle.descriptionPosition">
                {{ item.description }}
              </div>
            </basic-card>
          </div>
          <div v-if="module.labelState==0&&module.itemStyle.colGrid.phone>0" class="show-max-768px"
               :style="';justify-content:'+module.itemStyle.colGrid.align"
               style="display: flex;flex-direction: row;flex-wrap: wrap;align-content: center;align-items: flex-start;">
            <basic-card style="padding: 0 5px;cursor:pointer;box-sizing: border-box;"
                        :style="';flex:0 1 '+(100/module.itemStyle.colGrid.phone)+'%'"
                        v-for="item in module.itemStyle.itemList"  @click="toUrl(item.url)">
              <img
                  style="width: 100%;background-size: contain;background-repeat: no-repeat;background-position: center;border-radius: 10px;object-fit: contain"
                  :src="item.imgUrl">
              <div v-if="module.itemStyle.showItemDescription&&item.description!=null&&item.description.trim().length!=0"
                   class="self-module-font" :style="';text-align:'+module.itemStyle.descriptionPosition">
                {{ item.description }}
              </div>
            </basic-card>
          </div>
          <div v-if="module.labelState==2&&module.swiperStyle.swiperType=='block'">
            <swiper
                effect="coverflow" :loop="true"
                style="width: 100%"
                :slidesPerView="'auto'" :navigation="true"
                :grabCursor="true" :centeredSlides="true"
                :coverflowEffect='{
                     "rotate": 50,
                     "stretch": 0,
                     "depth": 200,
                     "modifier": 1,
                     "slideShadows": true
                  }'
                :autoplay='{
                      "delay": 2500,
                      "disableOnInteraction": false
                  }'
            >
              <swiper-slide v-for="img in imgData.mainSlideshows" style="width: auto;max-width: 100%;">
                <img align="center" style="cursor:pointer;border-radius: 0.8em;object-fit: contain;max-width: 100%;"
                     @click="toUrl(img.redirectUrl)"
                     :src="img.url">
              </swiper-slide>
            </swiper>
          </div>
          <div v-if="module.labelState==2&&module.swiperStyle.swiperType=='item'&&module.swiperStyle.colGrid.computer>0"
               class="show-min-768px">
            <swiper
                :loop="true"
                style="width: 100%"
                :slidesPerView="'auto'" :navigation="true"
                :grabCursor="true" :centeredSlides="module.swiperStyle.colGrid.align==='center'"
                :autoplay='{
                      "delay": 2500,
                      "disableOnInteraction": false
                  }'
            >
              <swiper-slide v-for="item in module.swiperStyle.itemList" style="padding: 10px;"
                            :style="';width: ' + (100/module.swiperStyle.colGrid.computer)+'%;'"  @click="toUrl(item.url)">
                <div
                    style="cursor:pointer;padding-bottom: 100%;width: 100%;background-size: contain;background-repeat: no-repeat;background-position: center;border-radius: 10px;"
                    :style="';background-image: url('+item.imgUrl+');'"></div>
                <div v-if="module.swiperStyle.showItemDescription"
                     style="font-size: 20px;line-height: 1.5;height: 30px;"
                     :style="';text-align:'+module.swiperStyle.descriptionPosition">
                  {{ item.description }}
                </div>
              </swiper-slide>
            </swiper>
          </div>
          <div v-if="module.labelState==2&&module.swiperStyle.swiperType=='item'&&module.swiperStyle.colGrid.phone>0"
               class="show-max-768px">
            <swiper
                :loop="true"
                style="width: 100%"
                :slidesPerView="'auto'" :navigation="true"
                :grabCursor="true" :centeredSlides="module.swiperStyle.colGrid.align==='center'"
                :autoplay='{
                      "delay": 2500,
                      "disableOnInteraction": false
                  }'
            >
              <swiper-slide v-for="item in module.swiperStyle.itemList" style="padding: 10px;"
                            :style="';width: ' + (100/module.swiperStyle.colGrid.phone)+'%;'"  @click="toUrl(item.url)">
                <div
                    style="cursor:pointer;padding-bottom: 100%;width: 100%;background-size: contain;background-repeat: no-repeat;background-position: center;border-radius: 10px;"
                    :style="';background-image: url('+item.imgUrl+');'"></div>
                <div v-if="module.swiperStyle.showItemDescription"
                     style="font-size: 20px;line-height: 1.5;height: 30px;"
                     :style="';text-align:'+module.swiperStyle.descriptionPosition">
                  {{ item.description }}
                </div>
              </swiper-slide>
            </swiper>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref, computed, watch, reactive, onMounted} from 'vue'
import {useRouter} from "vue-router";
import {useStore} from "vuex";

import {message} from "ant-design-vue";
import 'swiper/swiper-bundle.min.css'
import SwiperCore, {Navigation, Pagination, A11y, Lazy, EffectCoverflow, Autoplay} from 'swiper';

//@ts-ignored
import {Swiper, SwiperSlide} from "swiper/vue";
import {searchGoodByRandom, searchGoodByRecommend} from "../api/GoodRequest";
import BasicCard from "../components/card/basicCard.vue";


SwiperCore.use([Navigation, Pagination, Lazy, A11y, EffectCoverflow, Autoplay]);


export default defineComponent({
  components: {
    BasicCard,
    Swiper, SwiperSlide,
  },
  setup(props) {

    const router = useRouter();

    const store = useStore();

    const value = ref(0);


    const dataMap = ref(new Map());
    const number = ref(0);
    for (; number.value < 10; number.value++) {
      dataMap.value.set(number.value, number.value);
    }
    const add = () => {
      dataMap.value.set(number.value, number.value);
      number.value++
    }
    const selectIds = ref<number[]>([]);
    const toClick = (i: number) => {
      if (selectIds.value.indexOf(i) == -1) selectIds.value.push(i);
      else selectIds.value.splice(selectIds.value.indexOf(i), 1);
    }
    const toDelete = () => {
      for (let selectId of selectIds.value) dataMap.value.delete(selectId);
      selectIds.value = []
    }
    const dataList = computed(() => {
      let list: any[] = []
      dataMap.value.forEach((val) => list.push(val));
      return list
    })

    const urlList = {
      'top_rightSide': [
        'src/assets/img/home/top_rightSide/右侧-1.png',
        'src/assets/img/home/top_rightSide/右侧-2.png'
      ],
      'rotation': [
        'src/assets/img/home/rotation/1abab9f9cb844e51f97def262950e2c.jpg',
        'src/assets/img/home/rotation/a6fd580334af1e5839acb4418635f0c.png',
      ],
      'secondTopSide': [
        'src/assets/img/home/secondTopSide/_MG_0513.png',
        'src/assets/img/home/secondTopSide/IMG_2287.png',
        'src/assets/img/home/secondTopSide/IMG_7747.png'
      ],
      'sellType': [
        'src/assets/img/sellType/04.png',
        'src/assets/img/sellType/05.png',
        'src/assets/img/sellType/06.png',
        'src/assets/img/sellType/07.png',
        'src/assets/img/sellType/09.png',
        'src/assets/img/sellType/10.png',
        'src/assets/img/sellType/11.png',
        'src/assets/img/sellType/12.png',
      ]
    }

    const imgData = computed(() => {
      return store.state.globalInfo.mainPageInfo;
    })


    const typeList = computed(() => {
      return store.state.globalInfo.goodTypeTreeList;
    })

    const toPage = () => {
      router.push({
        name: '商品列表'
      })
    }

    const toRoute = (path: string) => {
      router.push({
        path
      })
      window.scrollTo(0, 0);
    }

    const toUrl = (path: string) => {
      if (path != null && path.trim().length != 0) window.location.href = path;
      window.scrollTo(0, 0);
    }

    const randomGoodList = reactive({
      list1: []
    })
    onMounted(() => {
      document.title = 'Shopping'
      searchGoodByRecommend().then((res) => {
        //@ts-ignored
        randomGoodList.list1 = res.data.result
      })
    })

    return {
      randomGoodList,
      toUrl,
      toRoute,
      toPage,
      urlList,
      imgData,
      value,
      dataMap,
      dataList,
      selectIds,
      toClick,
      toDelete,
      add,
      typeList
    }
  }
})
</script>

<style lang="less">

</style>
<style scoped lang="less">


.homePage-shop-by-department-list {

  display: flex;
  box-sizing: border-box;
  flex-direction: row;
  align-content: center;
  justify-content: space-between;
  align-items: center;

  .homePage-shop-by-department-photo-outer {
    display: flex;
    box-sizing: border-box;
    align-items: center;

    width: 1em;
    line-height: 1em;

    padding: 5px;

    .homePage-shop-by-department-photo {
      width: 40px;
      height: 40px;
      object-fit: contain;
      vertical-align: middle;
      float: left;
    }
  }

  .homePage-shop-by-department-text-outer {
    display: flex;
    flex: 1 1 auto;

    .homePage-shop-by-department-text {
      font-size: 16px !important;
      word-break: break-all;
      word-wrap: anywhere;
    }
  }


}

@media screen and (max-width: 1200px) {
  .homePage-shop-by-department-list {

    .homePage-shop-by-department-photo-outer {

      width: 24px;

      .homePage-shop-by-department-photo {
        box-sizing: border-box;
        font-size: 40px;
        line-height: 40px;
        border-radius: none;
      }
    }

    .homePage-shop-by-department-text-outer {
      .homePage-shop-by-department-text {
        margin-left: 0px;
        font-size: 12px;
        line-height: 24px;
      }
    }
  }
}

@media screen and (max-width: 992px) {
  .homePage-shop-by-department-list {

    .homePage-shop-by-department-photo-outer {

      width: 50px;
      display: flex;
      align-items: center;

      .homePage-shop-by-department-photo {
        box-sizing: border-box;
        font-size: 40px;
        line-height: 40px;
        border-radius: 5px;
      }
    }

    .homePage-shop-by-department-text-outer {
      .homePage-shop-by-department-text {
        margin-left: 0px;
        font-size: 12px;
        line-height: 24px;
      }
    }
  }
}


@media screen and (min-width: 992px) {
  .homePage-shop-by-department-list {

    align-items: center;
    flex-direction: column;

    font-size: 24px;
    line-height: 24px;

    .homePage-shop-by-department-photo-outer {

      height: 236px;
      width: auto;

      .homePage-shop-by-department-photo {
        object-fit: contain;
        height: 216px;
        width: auto;
        font-size: 128px;
        line-height: 128px;
        border-radius: 0;
      }
    }

    .homePage-shop-by-department-text-outer {

      margin-top: 10px;

      .homePage-shop-by-department-text {
        font-weight: 400;
        margin-left: 4px;
        font-size: 16px;
        line-height: 16px;
      }
    }
  }
}

.homePage-font {
  display: flex;
  margin: 4px;
  line-height: 32px;
  min-height: 32px;
  font-size: 18px;
  font-weight: 400;


  word-break: break-all;
  word-wrap: anywhere;

  transition: font-size .32s cubic-bezier(.22, .61, .36, 1);
  transition: line-height .32s cubic-bezier(.22, .61, .36, 1);
  transition: height .32s cubic-bezier(.22, .61, .36, 1);
}

@media screen and (max-width: 1200px) {
  .homePage-font {
    line-height: 27px;
    min-height: 27px;
    font-size: 17px;
  }
}

@media screen and (max-width: 1024px) {
  .homePage-font {
    line-height: 26px;
    min-height: 26px;
    font-size: 16px;
  }
}

@media screen and (max-width: 950px) {
  .homePage-font {
    line-height: 24px;
    min-height: 24px;
    font-size: 15px;
  }
}

@media screen and (max-width: 900px) {
  .homePage-font {
    line-height: 16px;
    min-height: 16px;
    font-size: 15px;
  }
}


@media screen and (max-width: 800px) {
  .homePage-font {
    line-height: 14px;
    min-height: 14px;
    font-size: 14px;
  }
}

@media screen and (max-width: 768px) {
  .homePage-font {
    line-height: 14px;
    min-height: 14px;
    font-size: 14px;
  }
}

.self-page-info-details {
  border-radius: 0.8em;
  padding: 20px 5px;
  margin: 0 100px;
  @media screen and ( max-width: 992px ) {
    padding: 10px 5px;
    margin: 0 50px;
  }

  @media screen and (max-width: 768px) {
    padding: 5px 5px;
    margin: 0 20px;
    font-size: 14px;
  }
  @media screen and (max-width: 650px) {
    padding: 10px 5px;
    margin: 0 10px;
    font-size: 13px;
  }
}


.show-max-768px {
  @media screen and(min-width: 769px) {
    display: none !important;
  }
}

.show-min-768px {
  @media screen and(max-width: 768px) {
    display: none !important;
  }
}

img {
  cursor: pointer;
}

.self-module-font {
  @media screen and(min-width: 769px) {
    font-size: 20px;
    line-height: 24px;
    margin: 20px;
  }
  @media screen and(max-width: 768px) {
    font-size: 16px;
    line-height: 16px;
    margin: 10px;
  }
}

</style>
